<template>
  <el-container>
    <el-header>
      <el-form :inline="true" :model="queryForm">
        <el-form-item label="菜单名称">
          <el-input v-model="queryForm.menuName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
          <el-button type="primary" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main>
      <el-table
        ref="menuTable"
        highlight-current-row
        @current-change="handleCurrentChange"
        max-height="500px"
        :data="menuData">
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="name" label="菜单名称"></el-table-column>
        <el-table-column prop="path" label="请求路径"></el-table-column>
        <el-table-column prop="component" label="请求组件"></el-table-column>
        <el-table-column prop="iconCls" label="图标" align="center">
          <template slot-scope="scope">
            <i :class="scope.row.iconCls"></i>
          </template>
        </el-table-column>
        <el-table-column prop="parent" label="父级菜单">
          <template slot-scope="scope">
            <p v-if="scope.row.parent !== null">{{scope.row.parent.name}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="enabled" label="是否有效">
          <template slot-scope="scope">
            <p v-if="scope.row.enabled === true">有效</p>
            <p v-else>无效</p>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="[5, 10, 20, 50, 100]"
        layout="sizes, prev, pager, next, jumper, ->, total, slot"
        :total="total">
      </el-pagination>
    </el-main>
    <el-footer>
      <el-row type="flex" justify="end">
        <el-button type="primary" @click="openDialog('addMenu')">新增</el-button>
        <el-button type="primary" @click="openDialog('modifyMenu')">修改</el-button>
        <el-popover placement="top" width="160px" v-model="visible" style="margin-left: 10px">
          <p>这个菜单确定删除吗？</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="visible = false">取消</el-button>
            <el-button type="primary" size="mini" @click="delMenu">确定</el-button>
          </div>
          <el-button slot="reference" type="primary">删除</el-button>
        </el-popover>
      </el-row>
    </el-footer>
    <OperationMenuDialog :dialog-visible="dialogFormVisible"
                         :form="menuForm"
                         :type="dialogOperation"
                         @query="query"
                         @close-dialog="closeDialog">
    </OperationMenuDialog>
  </el-container>
</template>

<script>
  import {postRequest} from "../../util/api";
  import {myMessage} from "../../util/myMessage";
  import OperationMenuDialog from "./dialog/OperationMenuDialog";

  export default {
    name: "Menu",
    components: {OperationMenuDialog},
    data() {
      return {
        queryForm: {
          menuName: ''
        },
        menuData: [],
        pageSize: 5,
        currentPage: 1,
        total: 0,
        dialogFormVisible: false,
        dialogOperation: "addMenu",
        menuForm: {
          id: 0,
          url: "",
          path: "",
          component: "",
          name: "",
          iconCls: "",
          parentId: ""
        },
        visible: false
      }
    },
    created() {
      this.query();
    },
    methods: {
      reset() {
        this.menuForm = {
          id: 0,
          url: "",
          path: "",
          component: "",
          name: "",
          iconCls: "",
          parentId: ""
        }
      },
      resetQuery() {
        this.queryForm.menuName = '';
        this.pageSize = 5;
        this.currentPage = 1;
      },
      query() {
        let queryParam = JSON.parse(JSON.stringify(this.queryForm));
        queryParam.pageSize = this.pageSize;
        queryParam.currentPage = this.currentPage;
        postRequest('/system/menu/getAllMenus', queryParam).then(res =>{
          if (res.status === 200) {
            this.menuData = res.object.data;
            this.total = res.object.total;
            if (this.total > 0 && this.menuData.length === 0) {
              this.resetQuery();
              this.query();
            }
          } else {
            myMessage.error(res.message);
          }
          this.queryForm.menuName = '';
        });
      },
      openDialog(value) {
        this.closeDialog();
        this.dialogOperation = value;
        if (value === 'modifyMenu') {
          console.log("menuForm", this.menuForm)
          if (this.menuForm === null || this.menuForm.id === 0) {
            myMessage.warning("请选择一行数据");
          } else {
            this.dialogFormVisible = true;
          }
        } else {
          this.dialogFormVisible = true;
        }
      },
      closeDialog() {
        this.dialogFormVisible = false;
      },
      delMenu() {
        this.visible = false;
        if (this.menuForm == null || this.menuForm.id === 0) {
          myMessage.warning("请选择要删除的数据");
        } else {
          postRequest('/system/menu/deleteMenu', {'menu_id': this.menuForm.id}).then(resp=>{
            if (resp.status === 200) {
              this.query();
            }
          })
        }
        this.reset();
      },
      handleCurrentChange(val) {
        this.menuForm = JSON.parse(JSON.stringify(val));
      },
      sizeChange(size) {
        this.pageSize = size;
        this.query();
      },
      currentChange(page) {
        this.currentPage = page;
        this.query();
      }
    }
  }
</script>

<style scoped>

</style>
